<template>
  <div id="chinaMap" @mouseleave="mouseleave"></div>
</template>

<script>
import echarts from "utils/echarts";
import "./js/china.js"; //这一步必须引入
// import "./js/echarts-gl.min.js"; //这一步必须引入

export default {
  name: "epidemicMap",
  props: {
    province: {
      type: null,
      default: () => []
    },
  },
  watch: {
    province(newVal, oldVal) {
      this.drawmap();
    }
  },
  methods: {
    randomData() {
      return Math.round(Math.random() * 600);
    },
    convertData(data) {
      var geoCoordMap = {};
      var mapFeatures = echarts.getMap("china").geoJson.features;
      // myChart.hideLoading();
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
      });
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      for(let item of res) {
        if(item.name == "云南") {
          item.value = [112.712251, 15.040609, item.value[2]]
        }
        if(item.name == "黑龙江") {
          item.value = [130.642464, 50.756967, item.value[2]]
        }
        if(item.name == "吉林") {
          item.value = [130.642464, 45.756967, item.value[2]]
        }
        if(item.name == "台湾") {
          item.value = [125.509062, 20.044332, item.value[2]]
        }
        if(item.name == "福建") {
          item.value = [123.306239, 22.075302, item.value[2]]
        }
        if(item.name == "江西") {
          item.value = [120.892151, 25.676493, item.value[2]]
        }
        if(item.name == "浙江") {
          item.value = [125.153576, 28.287459, item.value[2]]
        }
        if(item.name == "上海") {
          item.value = [125.153576, 30.287459, item.value[2]]
        }
        if(item.name == "江苏") {
          item.value = [125.153576, 32.287459, item.value[2]]
        }
        if(item.name == "广东") {
          item.value = [113.580637, 20.125178, item.value[2]]
        }
        if(item.name == "澳门") {
          item.value = [116.280637, 20.125178, item.value[2]]
        }
        if(item.name == "香港") {
          item.value = [118.280637, 20.125178, item.value[2]]
        }
        if(item.name == "天津") {
          item.value = [119.66, 40.2, item.value[2]]
        }
        if(item.name == "北京") {
          item.value = [121.46, 40.92, item.value[2]]
        }
        if(item.name == "河北") {
          item.value = [119.46, 38.92, item.value[2]]
        }
        if(item.name == "山东") {
          item.value = [121.46, 36.92, item.value[2]]
        }
        if(item.name == "安徽") {
          item.value = [119.283042, 31.86119, item.value[2]]
        }
      }
      return res;
    },
    drawmap() {
      let allData = JSON.parse(JSON.stringify(this.province));
      this.option = {
        backgroundColor: "",
        tooltip: {
          trigger: 'item',
          backgroundColor: "rgba(18,58,97,0.8)", //设置背景图片 rgba格式
          borderWidth: "2", //边框宽度设置1
          borderColor: "#23577a", //设置边框颜色
          textStyle: {
            color: "#fff" //设置文字颜色
          },
          extraCssText:'min-width:100px;',
          formatter: function (params) {
            console.log(params,11,params.value, `${isNaN(params.value) ? 0 : typeof params.value == 'object' ? params.value[2] : params.value}`, isNaN(params.value),'paramsparamsparams');
            let textHtml = `<div style="color:#09c1d1;font-size:18px;margin:8px 0 0 0;">${params.name}</div>
            <div style="color:#dee6ea;font-size:20px;margin:8px 0 0 0;">${typeof params.value == 'object' ? params.value[2] : isNaN(params.value) ? 0 : params.value}</div>
            <div style="color:#dee6ea;font-size:16px;margin:0 0 8px 0;">销售额</div>`
            return textHtml; 
          },
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '0%',
          top: '0%',
          containLabel: true
        },
        // visualMap: {
        //   min: Math.min.apply(null, allData.map(item => item.value)),
        //   max: Math.max.apply(null, allData.map(item => item.value)),
        //   realtime: false,
        //   calculable: true,
        //   inRange: {
        //     // color: ['#2e6ffe', '#377ffe', '#408bfe', '#4b9cff', '#51a5ff', '#56aeff']
        //     // color: ['#56aeff','#51a5ff' , '#4b9cff', '#408bfe', '#377ffe', '#2e6ffe']
        //   },
        //   textStyle: {
        //     color: "#fff"
        //   },
        // },
        geo: {
          show: false,
          map: "china",
        },
        //配置属性
        series: [
          {
            name: "数据",
            type: "map",
            mapType: "china",
            roam: false, //鼠标滑动缩放
            // left: "20%",
            label: {
              normal: {
                show: true, //省份名称
                textStyle: {
                  color: '#fff',
                  // fontSize:8
                }
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              emphasis:{
                borderWidth:1.5,
                borderColor:'#00d7f4',
                shadowColor:'#00d7f4',
                shadowBlur:2,
                areaColor:'#00d7f4',
                label: {
                  textStyle: {
                    color: '#fff'//鼠标经过字体颜色
                  }
                }
              },
              normal: {
                borderColor: "#58f9fd", 
                areaColor: '#56aeff', //默认背景颜色
              },
            },
            scaleLimit: {
              min: 1,
              max: 10
            },
            zoom: 1.26,
            data: allData //数据
          }, 
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.convertData(
              allData
                .sort(function(a, b) {
                  return b.value - a.value;
                })
            ),
            symbolSize: function(val) {
              return 6;
            },
            rippleEffect: {
              period: 1, //波纹秒数
              brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
              scale: 3 //波纹范围
            },
            hoverAnimation: true,
            label: {
              normal: {
                show: false, //省份名称
                position: "right",
              }
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow",
                borderWidth:3 ,
              },
            },
            zlevel: 5
          }
        ]
      };


      this.chart = echarts.init(document.getElementById("chinaMap"));
      this.chart.setOption(this.option);
    },
    // 鼠标离开父盒子范围，重绘地图
    mouseleave(){
      this.chart.setOption(this.option,true)
    }
  },
  mounted() {
    this.drawmap();
  }
};
</script>

<style scoped>
#chinaMap {
  margin: 0 10px;
}
</style>
